<template>
    <form class="validate-form-container">
        <!-- 输入框的部分 -->
        <slot name="default"></slot>
        <div class="submit-area" @click.prevent="submitForm">
            <!-- 提交按钮的部分，当没有没内容输入的时候，显示后备内容 -->
            <slot name="submit">
                <button type="submit" class="btn btn-danger">提交</button>
            </slot>
        </div>
    </form>
</template>
<script setup lang="ts">
import { defineEmits,onUnmounted,inject} from 'vue';
import { emitter } from '@/utlis/emit';
type ValidateFunc = () => boolean
//4、保存错误信息的数组
let funcArr:ValidateFunc[] = []
//5、接收事件的回调函数，将其函数存储到一个数组中
const callback = (func:ValidateFunc) =>{
    funcArr.push(func)
}
//6、进行接收或者卸载事件
if (emitter) {
    emitter.on('form-item-created', callback)
    onUnmounted(() => {
        emitter.off('form-item-created')
        funcArr = []
    })
}
//7、当点击的时候启动自定义事件
const emit = defineEmits(['form-submit'])
// funcArr.map(func => func())，map函数遍历 funcArr 数组并逐个调用数组中的验证函数，每个函数都会执行并返回一个布尔值，返回一个布尔值的数组。
//.every(result => result)，对布尔值数组的每一项进行遍历，如果全为true,则为true,若有一项为false,则最终结果为false.
const submitForm = () =>{
    const result = funcArr.map(func => func()).every(result => result )
    emit('form-submit',result)
}
</script>
<style>

</style>